<template>
  <div class="noteDetails">
    <div class="loading1" v-if="n.length <= 0">
      <van-loading size="30px" color="#fbb705">加载中...</van-loading>
    </div>
    <div v-if="n.length > 0">
      <div class="top">
        <div class="arrow-left" @click="onBack">
          <van-icon name="arrow-left" size="25" />
        </div>
        <div class="author">
          <img :src="n[0].author.p" alt="" @click="toUserDetails(n[0].author.id)" />
          <div class="name">{{ n[0].author.n }}</div>
          <div class="lvl">
            <i>LV.{{ n[0].author.lvl }}</i>
          </div>
        </div>
        <div class="focus" :style="isFocus ? 'background: #ccc':'background: #fff'" @click="onFocus(n[0].author.id)">{{isFocus ? '已关注' : '关注'}}</div>
        <div class="share" @click="onShare">
          <van-icon name="share-o" size="25" />
        </div>
      </div>
      <div class="c" ref="c" @scroll="onscroll">
      <div class="content" ref="content">
        <div>
          <van-swipe v-if="!n[0].video_url" @change="onChange">
            <div class="sw">
              <van-swipe-item
                v-for="(item, index) in n[0].images"
                :key="index"
                loop="false"
                ><img :src="item.u" alt=""
              /></van-swipe-item>
            </div>
            <template #indicator>
              <div class="indicator">
                {{ swipeIndex }}/{{ n[0].images.length }}
              </div>
            </template>
            <div class="select">{{ n[0].selection_text }}</div>
          </van-swipe>
          <div class="video" v-if="n[0].video_url">
            <video :src="n[0].video_url" controls autoplay></video>
          </div>
          <div class="title">{{ n[0].title }}</div>
          <div
            class="contents"
            v-for="(item1, index1) in n[0].contents"
            :key="index1"
          >
            <p v-for="(item2, index2) in item1.c" :key="index2">{{ item2 }}</p>
          </div>
          <div class="box1">
            <div class="publishtime">{{ n[0].publishtime }}</div>
            <div class="box1-right">
              <span>{{ n[0].favo_count }}次收藏</span
              ><span>{{ n[0].like_count }}次赞</span>
            </div>
          </div>
          <div class="comments" v-if="n[0].cs.length > 0">
            <div class="cs-title">笔记评论</div>
            <div
              class="cs-item"
              v-for="(item3, index3) in n[0].cs"
              :key="index3"
            >
              <div class="cs-item-top">
                <div class="l">
                  <img :src="item3.u.p" alt="" />
                </div>
                <div class="r">
                  <div class="name">
                    {{ item3.u.n }}<span class="lvl">LV.{{ item3.u.lvl }}</span>
                  </div>
                  <div class="at">{{ item3.at }}</div>
                </div>
              </div>
              <div
                class="cs-content"
                v-for="(item4, index4) in item3.content"
                :key="index4"
              >
                {{ item4.c }}
              </div>
            </div>
          </div>
          <div class="container-water-fall">
            <div class="title">相关笔记</div>
            <waterfall
              :col="col"
              :width="itemWidth"
              :gutterWidth="gutterWidth"
              :data="dataList"
            >
              <template>
                <div
                  class="notes-item"
                  v-for="(item5, index5) in dataList"
                  :key="index5"
                  @click="toNoteDetails1(item5.note.id)"
                >
                  <div class="notes-item-img">
                    <!-- <div class="notes-item-icon" v-if="item.note.images.length > 1">
                  <img :src="atlasIcon" alt="" />
                </div> -->
                    <div class="play-icon" v-if="item5.note.video_url">
                      <van-icon
                        class="i"
                        name="play-circle-o"
                        size="40"
                        color="#fff"
                      />
                    </div>
                    <img :src="item5.note.image_u" alt="" />
                  </div>
                  <div class="notes-item-title" v-if="item5.note.title != ''">
                    {{ item5.note.title }}
                  </div>
                  <div class="author">
                    <div class="author-left">
                      <img :src="item5.note.author.p" alt="" />
                      <div class="name">{{ item5.note.author.n }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </waterfall>
          </div>
        </div>
        <div class="loading" v-if="isloading">
          <van-loading size="24px" color="#fbb705">加载中...</van-loading>
        </div>
      </div>
      </div>
      <div class="bottom">
        <input type="text" :placeholder="n[0].comment_hint" />
        <div class="icon" @click="onSeeAll">
          <van-icon name="chat-o" size="25" /><span>{{
            n[0].comments_count_text == "" ? "评论" : n[0].comments_count_text
          }}</span>
        </div>
        <div class="icon">
          <van-icon
            :name="islike ? 'like' : 'like-o'"
            :color="islike ? 'red' : ''"
            size="25"
            @click="onlike(n[0].like_count)"
          /><span>{{ n[0].like_count }}</span>
        </div>
        <div class="icon">
          <van-icon
            :name="isstar ? 'star' : 'star-o'"
            :color="isstar ? '#fbb705' : ''"
            size="25"
            @click="onstar"
          /><span>{{ isstar ? "已收藏" : "收藏" }}</span>
        </div>
      </div>
      <van-share-sheet
        v-model="showShare"
        :options="options"
        @select="onselect"
        @cancel="oncancel"
        @click-overlay="onClickOverlay"
      />
      <van-popup
      class="van-popup"
      v-model="show"
      round
      closeable
      position="bottom"
      :style="{ height: '70%' }"
    >
      <div class="van-popup-top">
        全部评论（{{n[0].cs.length}}）
      </div>
      <div class="van-popup-center" ref="popupCenter">
        <div class="comments" ref="comments">
          <div
            class="hc-item"
            v-for="(item6, index6) in n[0].cs"
            :key="index6"
          >
            <div class="hc-item-userInfo">
              <div class="user-p">
                <img :src="item6.u.p" alt="" />
              </div>
              <div class="userInfo-right">
                <div class="user-n">
                  {{ item6.u.n
                  }}<span class="lvl"
                    ><i>LV.{{ item6.u.lvl }}</i></span
                  >
                </div>
                <div class="city">{{ item6.at }}</div>
              </div>
            </div>
            <div class="hc-content">{{ item6.content[0].c }}</div>
            <div class="child_comments_box" v-if="item6.child_comments&&item6.child_comments.length > 0">
              <div
                class="child_comments"
                v-for="(item3, index3) in item6.child_comments"
                :key="index3"
              >
                <span class="un">{{ item3.u.n }}：</span>回复　<span
                  class="reply_user-n"
                  >{{ item3.reply_user.n }}：</span
                >{{ item3.content[0].c }}
              </div>
            </div>
          </div>
          <!-- <div class="loading" v-if="isloading2">
        <van-loading size="24px" color="#fbb705">加载中...</van-loading>
      </div> -->
      <div class="noMore">没有更多评论了</div>
        </div>
      </div>
      <div class="van-popup-bottom">
        <input type="text" placeholder="说点什么" />
      </div>
    </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "NoteDetails",
  data() {
    return {
      swipeIndex: 1,
      isFocus: false,
      islike: false,
      isstar: false,
      isPraise: false,
      nid: "",
      isloading: false,
      n: [],
      offset: 0,
      dataList: [],
      col: 2,
      atlasIcon: require("../assets/atlas.png"),
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
        ],
      ],
      MyFocus:[],
      users:[],
      isLogin:false,
      show:false
    };
  },
  created() {
    this.nid = this.$route.query.nid;
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
      this.users.forEach((ele) => {
        this.MyFocus = ele.Focus
        if(ele.isLogin){
          this.isLogin = true
        }
      });
    }
    this.getNoteDetails();
    this.getRelated();
  },
  computed: {
    itemWidth() {
      return 364 * 0.5 * (document.documentElement.clientWidth / 375);

      //rem布局 计算列宽度

      //可以根据自己的rem设置修改这里的 334 值
    },

    gutterWidth() {
      return 0 * 0.5 * (document.documentElement.clientWidth / 375);

      //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)

      //可以根据自己的rem设置修改这里的 36 值
    },
  },
  methods: {
    switchCol(col) {
      this.col = col;
    },
    onChange() {
      if(this.swipeIndex == this.n[0].images.length){
        this.swipeIndex = 1
      }else{
        this.swipeIndex += 1
      }
    },
    getNoteDetails() {
      this.isloading = true;
      this.axios({
        method: "get",
        url: "note/detail",
        params: {
          recipeid: this.nid,
        },
      }).then((result) => {
        if (result.data.state == "success") {
          this.MyFocus.forEach(ele=>{
            if(result.data.result.note.author.id == ele){
              this.isFocus = true
            }
          })
          result.data.result.note.contents.forEach((ele) => {
            ele.c = ele.c.split("\n");
          });
          this.n.push(result.data.result.note);
          console.log(this.n[0].cs);
          
        }
        this.isloading = false;
      });
    },
    getRelated() {
      this.isloading = true;
      this.axios({
        method: "get",
        url: "note/related",
        params: {
          noteid: this.nid,
          offset: this.offset,
          limit: 20,
        },
      }).then((result) => {
        
        result.data.result.list.forEach((ele) => {
          this.dataList.push(ele);
        });
        this.offset += 20;
        this.isloading = false;
      });
    },
    onBack() {
      this.$router.go(-1);
    },
    onscroll(e) {
      const contentHeight = this.$refs.content.offsetHeight;
      const cHeight = this.$refs.c.offsetHeight;
      if (
        contentHeight - (e.target.scrollTop + cHeight) < 50 &&
        !this.isloading
      ) {
        this.getRelated();
      }
    },
    onlike(count) {
      if (!this.islike) {
        this.islike = true;
        count += 1;
        this.n[0].like_count = count;
      } else {
        this.islike = false;
        count -= 1;
        this.n[0].like_count = count;
      }
    },
    onstar() {
      if (!this.isstar) {
        this.isstar = true;
      } else {
        this.isstar = false;
      }
    },
    toUserDetails(id){
      this.$router.push({name:'UserDetails',query:{id}})
    },
    toNoteDetails1(nid){
      this.$router.push({name:'NoteDetails',query:{nid}})
      location.reload()
    },
    onShare() {
      this.showShare = true;
    },
    onselect() {
      this.$toast.success("分享成功");
      this.showShare = false;
    },
    oncancel() {
      this.showShare = false;
    },
    onClickOverlay() {
      this.oncancel();
    },
    onFocus(id) {
      if(this.isLogin){
        this.users.forEach((ele) => {
        if (ele.isLogin) {
            if (!this.isFocus) {
              this.isFocus = true;
              ele.Focus.push(id)
            } else {
              this.isFocus = false;
              ele.Focus.forEach((item,index)=>{
                if(id == item){
                  ele.Focus.splice(index,1)
                }
              })
            }
        }
      });
      localStorage.setItem('users',JSON.stringify(this.users))
      }else{
        this.$dialog
        .confirm({
          title: "您尚未登录",
          message: "请登录后再试",
        })
        .then(() => {
          this.$router.push({name:'Login'})
        })
        .catch(() => {});
      }
    },
    onSeeAll() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.noteDetails {
  width: 100%;
  padding-top: 55px;
  .loading1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top {
    position: fixed;
    top: 0px;
    width: calc(100% - 20px);
    background-color: #fbb705;
    padding: 45px 15px 15px;
    display: flex;
    align-items: center;
    z-index: 999;
    .author {
      display: flex;
      align-items: center;
      margin-left: 15px;
      width: 55%;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name {
        margin-right: 5px;
      }
      .lvl {
        color: red;
        font-weight: 600;
      }
    }
    .focus {
      font-size: 10px;
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 20px;
      background-color: #fbb705;
      margin-right: 15px;
    }
    .share {
      font-size: 25px;
    }
  }
  .c{
    position: fixed;
    top: 95px;
    left: 0;
    right: 0;
    bottom: 64px;
    overflow-y: auto;
  }
  .content {
    width: calc(100% - 10px);
    // height: calc(667px - 55px - 64px);
    background-color: #fff;
    padding: 0 5px 64px;
    .van-swipe {
      .sw {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        .van-swipe-item {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          background-color: #000;
          img {
            width: 100%;
            vertical-align: text-top;
          }
        }
      }
      .indicator {
        padding: 2px 10px;
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
      }
      .select {
        position: absolute;
        left: 10px;
        bottom: 10px;
        padding: 2px 5px;
        background-color: #fbb705;
      }
    }
    .video {
      width: 100%;
      video {
        width: 100%;
      }
    }
    .title {
      width: calc(100% - 20px);
      padding: 0 10px;
      margin: 10px 0;
      font-size: 20px;
    }
    .contents {
      font-size: 16px;
      width: calc(100% - 20px);
      padding: 0 10px;
      margin-bottom: 20px;
    }
    .box1 {
      width: calc(100% - 20px);
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      color: #999;
      .box1-right {
        span {
          margin: 0 5px;
        }
      }
    }
    .comments {
      width: calc(100% - 20px);
      padding: 0 10px;
      margin-top: 30px;
      .cs-title {
        font-size: 18px;
        margin-bottom: 20px;
      }
      .cs-item {
        margin-bottom: 15px;
        .cs-item-top {
          display: flex;
          align-items: center;
          .l {
            margin-right: 10px;
            img {
              width: 35px;
              height: 35px;
              border-radius: 50%;
            }
          }
          .r {
            .name {
              margin-bottom: 5px;
              .lvl {
                color: #fbb705;
                font-weight: 600;
                margin-left: 10px;
              }
            }
            .at {
              color: #999;
            }
          }
        }
        .cs-content {
          margin-top: 5px;
          padding-left: 50px;
        }
      }
    }
    .container-water-fall {
      .title {
        font-size: 18px;
        margin: 20px 0;
      }
      .notes-item {
        background: #ffffff;
        border-radius: 5px;
        margin: 6px;
        .notes-item-img {
          position: relative;
          .notes-item-icon {
            width: 15px;
            height: 15px;
            padding: 5px;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 9;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .play-icon {
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            z-index: 9;
          }
          img {
            border-radius: 5px 5px 0 0;
            width: 100%;

            height: auto;
          }
        }
        .notes-item-title {
          font-size: 13px;
          padding: 0 5px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .author {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          padding: 10px 5px;
          .author-left {
            display: flex;
            align-items: center;
            width: 70%;
            img {
              width: 25px;
              height: 25px;
              border-radius: 50%;
              margin-right: 5px;
            }
            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .loading {
      width: 100%;
      margin-top: 10px;
      text-align: center;
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
    input {
      width: 30%;
      border-style: none;
      background-color: #eee;
      padding: 10px 15px;
      border-radius: 20px;
      margin-right: 10px;
    }
    .icon {
      font-size: 15px;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
  .van-popup {
    .van-popup-top {
      font-size: 18px;
      padding: 15px;
      border-bottom: 1px solid #ddd;
    }
    .van-popup-center {
      width: calc(100% - 30px);
      height: calc(100% - 55px - 57px);
      overflow-y: auto;
      padding: 0 15px;
      .comments {
        .hc-item {
          margin: 15px 0;
          .hc-item-userInfo {
            display: flex;
            align-items: center;
            .user-p {
              margin-right: 10px;
              img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
            }
            .userInfo-right {
              .user-n {
                margin-bottom: 5px;
                span {
                  color: #fbb705;
                  font-weight: 600;
                  margin-left: 5px;
                }
              }
              .city {
                color: #999;
              }
            }
          }
          .hc-content {
            margin: 5px 0 5px 40px;
          }
          .child_comments_box {
            margin: 5px 0 5px 40px;
            padding: 10px;
            border-radius: 5px;
            background-color: #eee;
            .child_comments {
              margin-bottom: 3px;
              span {
                font-size: 13px;
                font-weight: 600;
              }
            }
          }
        }
        .loading {
      width: 100%;
      margin: 10px 0;
      text-align: center;
    }
    .noMore{
        width: 100%;
        text-align: center;
        margin: 10px 0;
        color: #666;
    }
    }
    }
    .van-popup-bottom {
      width: 100%;
      position: fixed;
      bottom: 0;
      box-shadow: 5px 0 10px 5px #eee;
      padding: 10px 15px;
      input {
        width: calc(100% - 30px - 30px);
        border-style: none;
        background-color: #eee;
        padding: 10px 15px;
        font-size: 15px;
        border-radius: 20px;
      }
    }
  }
}
</style>